<template>
  <div class="comment-item">
    <p class="author">{{ comment.username || comment.userId }}</p>
    <p class="content">{{ comment.content }}</p>
    <p class="time">{{ formatDate(comment.createTime) }}</p>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

const props = defineProps({
  comment: {
    type: Object,
    required: true,
  },
});

const formatDate = (time: string | number) => {
  const d = new Date(time);
  return d.toLocaleString();
};
</script>

<style scoped>
.comment-item {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}
.author {
  font-weight: bold;
  color: #409eff;
}
.content {
  margin: 5px 0;
}
.time {
  font-size: 12px;
  color: #aaa;
}
</style>
